<template>
  <div id="myChart"></div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "SinglePath",
    mounted: function () {
      const that = this;
      this.getData();
    },
    methods: {
      getData() {
        const that = this;
        const loading = this.$loading({
          lock: true,
          text: '请求轨迹数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get("http://localhost:8089/try/car/single").then(function (result) {
          if (result.data.length > 0) {
            let data = result.data;
            let points = [];
            for (let i = 0; i < data.length; i++) {
              points.push([data[i].lng, data[i].lat])
            }
            that.showChart(points);
          }

        }).catch(function (err) {
          console.log(err)
        }).finally(function () {
          loading.close();
        })
      },
      showChart(busLines) {
        let planePath = 'path://M268.601,18.375c0,0,14.496,0,18.005,0 		\
                c31.325,0,59.155,0,59.155,0c6.701,0,12.14,5.238,12.14,11.695v17.872c-24.507,0-44.374,19.859-44.374,44.351 		\
                c0,24.492,19.86,44.351,44.374,44.351V335.99c-24.507,0.006-44.374,19.857-44.374,44.357c0,24.484,19.86,44.344,44.374,44.352 		\
                v25.26c0,6.457-5.431,11.695-12.14,11.695H200.158c-12.013,0-19.527-7.781-19.527-19.084c0,0,0-351.215,0-365.378 		\
                s18.736-42.622,44.1-53.734C238.303,17.658,268.601,18.375,268.601,18.375z M202.818,387.729v39.918 		\
                c0,6.531,5.29,11.828,11.821,11.828h35.426c6.531,0,11.814-5.297,11.814-11.828v-39.918H202.818z M202.818,321.199v51.746h59.053 		\
                v-51.746H202.818z M202.818,254.904v51.518h59.053v-51.518H202.818z M202.818,188.413v51.517h59.053v-51.517H202.818z 		 \
                M202.818,121.882v51.746h59.053v-51.746H202.818z M289.658,121.904c-3.037,0-5.497,3.311-5.497,7.396 		\
                c0,4.086,2.46,7.389,5.497,7.389h10.978c3.037,0,5.497-3.303,5.497-7.389c0-4.085-2.46-7.396-5.497-7.396H289.658z M237.38,43.472 		c-20.229,4.766-34.562,30.897-34.562,38.145c0,17.754,0,25.475,0,25.475h59.053l0.03-66.094 		C261.901,40.998,253.641,39.653,237.38,43.472z M328.326,380.348c0-16.328,13.247-29.568,29.59-29.568 		\
                c16.335,0,29.582,13.24,29.582,29.568c0,16.334-13.247,29.566-29.582,29.566C341.573,409.914,328.326,396.682,328.326,380.348z 		 M328.326,92.286c0-16.328,13.247-29.567,29.59-29.567c16.335,0,29.582,13.239,29.582,29.567c0,16.335-13.247,29.574-29.582,29.574 		C341.573,121.86,328.326,108.621,328.326,92.286z  '

        let myChart = echarts.init(document.getElementById('myChart'));
        let option =
          myChart.setOption({
            bmap: {
              center: [116.46, 39.92],
              zoom: 10,
              roam: true,
              mapStyle: {
                styleJson: [
                  {
                    'featureType': 'land',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#081734'
                    }
                  },
                  {
                    'featureType': 'building',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#04406F'
                    }
                  },
                  {
                    'featureType': 'building',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'highway',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#015B99'
                    }
                  },
                  {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#003051'
                    }
                  },
                  {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'green',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'water',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#044161'
                    }
                  },
                  {
                    'featureType': 'subway',
                    'elementType': 'geometry.stroke',
                    'stylers': {
                      'color': '#003051'
                    }
                  },
                  {
                    'featureType': 'subway',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'all',
                    'elementType': 'labels.text.stroke',
                    'stylers': {
                      'color': '#313131'
                    }
                  },
                  {
                    'featureType': 'all',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                      'color': '#FFFFFF'
                    }
                  },
                  {
                    'featureType': 'manmade',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'manmade',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'local',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'local',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'subway',
                    'elementType': 'geometry',
                    'stylers': {
                      'lightness': -65
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                      'lightness': -40
                    }
                  },
                  {
                    'featureType': 'boundary',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#8b8787',
                      'weight': '1',
                      'lightness': -29
                    }
                  }
                ]
              }
            },
            tooltip: {
              show: true,
              trigger: 'item',
              hideDelay: 4000,
              formatter: function (d) {
                return d.data.name ;
              }
            },
            color: ['aqua', 'gold', 'lime'],
            legend: {

              data: ['单点轨迹'],
              x: 'left',
              orient: 'vertical',
              padding: [30, 15, 15, 30],
              textStyle: {
                fontSize: 17,
                color: 'rgb(204,204,204)',
              },
              selectedMode: 'single',
            },
            series: [{
              name: '单点轨迹',
              type: 'lines',
              data: [{
                name: 3479,
                coords: busLines
              }],
              coordinateSystem: 'bmap',
              polyline: true,
              lineStyle: {
                normal: {
                  opacity: 1,
                  width: 2
                },
                emphasis: {
                  width: 8
                }
              },
              effect: {
                show: true,
                symbolSize: 8,
                symbol: planePath,
                period: 25,
                color: "#000000",
                // trailLength: 1
              },

              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              }
            }]
          });
        let bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
      },

    }
  }
</script>

<style scoped>

</style>
